<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 今日到访 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-popover class="mr10" placement="right" width="200" trigger="click">
          <div class="qrCodeUrl" id="qrCodeUrl" ref="qrCodeUrl" style="width:100%;"></div>
          <p style="text-align: center;margin: 20px 0 0;">请自行截图打印</p>
          <el-button slot="reference" type="success" size="small">到访签到二维码</el-button>
        </el-popover>
        <el-date-picker class="mr10" v-model="query.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                        range-separator="-">
        </el-date-picker>
        <el-select class="mr10" v-model="query.objective" placeholder="请选择到访目的">
          <el-option label="全部" value=""></el-option>
          <el-option label="客户上门" value="客户上门"></el-option>
          <el-option label="面试登记" value="面试登记"></el-option>
          <el-option label="渠道拜访" value="渠道拜访"></el-option>
        </el-select>
        <el-input class="mr10" v-model="query.kw" placeholder="请输入姓名/手机号" style="width:300px"></el-input>
        <el-button type="primary" size="small" @click="souClick">搜索</el-button>
        <el-button type="success" size="small" @click="daoExcel" :loading="exceltrueFlg">导出excel</el-button>
      </div>
      <el-table :data="visitList" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column property="vUserName" label="客户姓名"></el-table-column>
        <el-table-column property="vUserPhone" label="客户手机号"></el-table-column>
        <el-table-column property="vRemarks" label="到访目的"></el-table-column>
        <el-table-column property="vManagerName" label="邀请人"></el-table-column>
        <el-table-column property="vTime" label="到访时间"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, sizes,prev, pager, next" :current-page="query.page" :page-size="query.limit"
                       :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]" :total="query.totalCount" @current-change="handlePageChange"
                       @prev-click="handlePageChange" @next-click="handlePageChange" @size-change="handleSizeChange"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import { getUserMa, getVisitList, VisitExcelChu } from '../../../api/index';
import QRCode from 'qrcodejs2';
export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        objective: '',
        time: '',
        kw: '',
        totalCount: 0,
      },
      visitList: [],
      visitArr: [],
      visitMaUrl: '',
      exceltrueFlg: false,

    };
  },
  created() {
    this.userMa();
    this.getVisitListData();
  },
  methods: {
    //获取到访二维码
    userMa() {
      getUserMa().then(res => {
        if (res.code == 0) {
          document.getElementById('qrCodeUrl').innerHTML = '';
          this.creatQrCode(res.visitCode.cUrl, document.getElementById('qrCodeUrl'));
        } else {
          this.$message(res.msg);
        }
      })
    },
    //生成二维码
    creatQrCode(text, item) {
      new QRCode(item, {
        text: text,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    //获取今日到访列表
    getVisitListData() {
      getVisitList({
        page: this.query.page,
        limit: this.query.limit,
        remark: this.query.objective,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        kw: this.query.kw
      }).then(res => {
        if (res.code == 0) {
          this.visitList = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //今日到访翻页
    handlePageChange(page) {
      this.query.page = page;
      this.getVisitListData();
    },
    handleSizeChange(val) {
      this.query.page = 1;
      this.query.limit = val;
      this.getVisitListData();
    },
    //选中
    handleSelectionChange(val) {
      this.visitArr = val.map(item => {
        return item.vId;
      });
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getVisitListData();
    },
    //导出
    daoExcel() {
      this.$confirm("导出过程中请不要刷新或者离开页面", "提示", {
        type: 'warning',
      }).then(() => {
        if (this.visitArr.length > 0) {
          this.exceltrueFlg = true;
          VisitExcelChu({ recordIds: this.visitArr }).then((res) => {
            this.exceltrueFlg = false;
            const link = document.createElement('a');
            let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
            link.download = "今日到访登记表";
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message.success('导出成功');
          });
        } else {
          this.$message('请选择要导出的数据');
        }
      })
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
</style>
